﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Azhar CS - Official site</title>
    <!-- Styles -->
    <link href="Content/bootstrap/themes/css/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap/themes/css/theme.css" rel="stylesheet" />
    <link href="Content/bootstrap/themes/css/index.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" type="text/css" href="Content/bootstrap/themes/css/animate.css" media="screen, projection" />
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body class="pull_top">
    <div class="navbar transparent navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">
                    <strong>AZHAR CS</strong>
                </a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                        <!--li><a href="about-us.html">ABOUT US</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle active" data-toggle="dropdown">
                            PAGES
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="features.html">Features</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="portfolio-item.html">Portfolio Item</a></li>
                            <li><a href="coming-soon.html">Coming Soon</a></li>
                            <li><a href="sign-in.html">Sign in</a></li>
                            <li><a href="sign-up.html">Sign up</a></li>
                            <li><a href="backgrounds.html">Backgrounds</a></li>
                        </ul>
                    </li>
                    <li><a href="pricing.html">PRICING</a></li>
                    
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a class="btn-header" href="sign-up.html">Sign up</a></li>
                    <li><a class="btn-header" href="sign-in.html">Sign in</a></li-->
                        <li><a href="coming-soon.html">SOOOOOOOOoon!</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="" id="feature_slider">
        <!-- 
            Each slide is composed by <img> and .info
            - .info's position is customized with css in index.css
            - each <img> parallax effect is declared by the following params inside its class:
            
            example: class="asset left-472 sp600 t120 z3"
            left-472 means left: -472px from the center
            sp600 is speed transition
            t120 is top to 120px
            z3 is z-index to 3
            Note: Maintain this order of params
            For the backgrounds, you can combine from the bgs folder :D
        -->
        <article class="slide active" id="showcasing" style='display: block; background-image: url("Content/bootstrap/themes/images/landscape.png"); background-attachment: scroll; background-repeat: repeat-x; background-position-x: center; background-position-y: top; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;'>
            <img class="asset left-30 sp600 t120 z1" style="left: 601.5px; top: 120px; display: inline; z-index: 1;" src="Content/bootstrap/themes/images/macbook.png" />
            <div class="info" style="display: block;">
                <h2>Beautiful theme for showcasing your works.
                </h2>
            </div>
        </article>
        <article class="slide" id="ideas" style='display: none; background-image: url("Content/bootstrap/themes/images/aqua.jpg"); background-attachment: scroll; background-repeat: repeat-x; background-position-x: center; background-position-y: top; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;'>
            <div class="info" style="display: none;">
                <h2>We love to turn ideas into beautiful things.
                </h2>
            </div>
            <img class="asset left-480 sp600 t260 z1" style="left: -841px; top: 260px; display: inline; z-index: 1;" src="Content/bootstrap/themes/images/left.png" />
            <img class="asset left-210 sp600 t213 z2" style="left: -854px; top: 213px; display: inline; z-index: 2;" src="Content/bootstrap/themes/images/middle.png" />
            <img class="asset left60 sp600 t260 z1" style="left: -849px; top: 260px; display: inline; z-index: 1;" src="Content/bootstrap/themes/images/right.png" />
        </article>
        <article class="slide" id="tour" style='display: none; background-image: url("Content/bootstrap/themes/images/color-splash.jpg"); background-attachment: scroll; background-repeat: repeat-x; background-position-x: center; background-position-y: top; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;'>
            <img class="asset left-472 sp650 t210 z3" style="left: -558px; top: 210px; display: inline; z-index: 3;" src="Content/bootstrap/themes/images/ipad.png" />
            <img class="asset left-365 sp600 t270 z4" style="left: -485px; top: 270px; display: inline; z-index: 4;" src="Content/bootstrap/themes/images/iphone.png" />
            <img class="asset left-350 sp450 t135 z2" style="left: -742px; top: 135px; display: inline; z-index: 2;" src="Content/bootstrap/themes/images/desktop.png" />
            <img class="asset left-185 sp550 t220 z1" style="left: -746px; top: 220px; display: inline; z-index: 1;" src="Content/bootstrap/themes/images/macbook.png" />
            <div class="info" style="display: none;">
                <h2>Fully Responsive theme
                </h2>
                <a href="features.html">TOUR THE PRODUCT</a>
            </div>
        </article>
        <article class="slide" id="responsive" style='display: none; background-image: url("Content/bootstrap/themes/images/indigo.jpg"); background-attachment: scroll; background-repeat: repeat-x; background-position-x: center; background-position-y: top; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;'>
            <img class="asset left-472 sp600 t120 z3" style="left: -732px; top: 120px; display: inline; z-index: 3;" src="Content/bootstrap/themes/images/html5.png" />
            <img class="asset left-190 sp500 t120 z2" style="left: -732px; top: 120px; display: inline; z-index: 2;" src="Content/bootstrap/themes/images/css3.png" />
            <div class="info" style="display: none;">
                <h2>Responsive <strong>HTML5 &amp; CSS3</strong>
                    Theme                  
                </h2>
            </div>
        </article>
        <ul id="pagination" style="left: 603.5px; display: block;">
            <li class="active">
                <a href="#showcasing">0</a>
            </li>
            <li class="">
                <a href="#ideas">1</a>
            </li>
            <li class="">
                <a href="#tour">2</a>
            </li>
            <li class="">
                <a href="#responsive">3</a>
            </li>
        </ul>
        <a id="slide-left" style="display: inline;" href="#"></a><a id="slide-right" style="display: inline;" href="#"></a>
    </section>
    <div id="showcase">
        <div class="container">
            <div class="section_header">
                <h3>Our Services
                </h3>
            </div>
            <div class="row feature_wrapper">
                <!-- Features Row -->
                <div class="features_op1_row">
                    <!-- Feature -->
                    <div class="span4 feature first">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="Content/bootstrap/themes/images/service1.png" />
                                <span class="circle">
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Responsive theme
                            </h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.                                 
                           
                            </p>
                        </div>
                    </div>
                    <!-- Feature -->
                    <div class="span4 feature">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="Content/bootstrap/themes/images/service2.png" />
                                <span class="circle">
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Easy customization
                            </h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.
                                   
                           
                            </p>
                        </div>
                    </div>
                    <!-- Feature -->
                    <div class="span4 feature last">
                        <div class="img_box">
                            <a href="services.html">
                                <img src="Content/bootstrap/themes/images/service3.png" />
                                <span class="circle">
                                    <span class="plus">+</span>
                                </span>
                            </a>
                        </div>
                        <div class="text">
                            <h6>Made with love
                            </h6>
                            <p>
                                There are many variations of passages of generators on the  embarrassing hidden in   content here making it look like.                                   
                           
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="features">
        <div class="container">
            <div class="section_header">
                <h3>Features
                </h3>
            </div>
            <div class="row feature">
                <div class="span6">
                    <img src="Content/bootstrap/themes/images/showcase1.png" />
                </div>
                <div class="span6 info">
                    <h3>
                        <img src="Content/bootstrap/themes/images/features-ico1.png" />
                        Beautiful on all devices                         
                    </h3>
                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.                         
                   
                    </p>

                </div>

            </div>

            <div class="row feature ss">

                <div class="span6 info">

                    <h3>
                        <img src="Content/bootstrap/themes/images/features-ico2.png" />
                        Blog page included
                         
                    </h3>

                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                         
                   
                    </p>

                </div>

                <div class="span6">
                    <img class="pull-right" src="Content/bootstrap/themes/images/showcase2.png" />
                </div>

            </div>

            <div class="row feature ss">

                <div class="span6">
                    <img src="Content/bootstrap/themes/images/showcase3.png" />
                </div>

                <div class="span6 info">

                    <h3>
                        <img src="Content/bootstrap/themes/images/features-ico3.png" />
                        Simple and clean coming soon page
                         
                    </h3>

                    <p>
                        There are many variations of passages of Lorem Ipsum available, but the randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                         
                   
                    </p>

                </div>

            </div>

        </div>

    </div>
    <!-- Pricing Option -->

    <div id="in_pricing">

        <div class="container">

            <div class="section_header">

                <h3>Pricing
                </h3>

            </div>

            <div class="row charts_wrapp">

                <!-- Plan Box -->

                <div class="span4">

                    <div class="plan">

                        <div class="wrapper">

                            <h3>Lite
                            </h3>

                            <div class="price">
                                <span class="dollar">$</span>
                                <span class="qty">35</span>
                                <span class="month">/month</span>
                            </div>

                            <div class="features">

                                <p>
                                    <strong>10</strong>
                                    Shared Projects
                                        
                               
                                </p>

                                <p>
                                    <strong>4</strong>
                                    Team Members
                                        
                               
                                </p>

                                <p>
                                    <strong>10</strong>
                                    Storage
                                        
                               
                                </p>

                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>

                    </div>

                </div>

                <!-- Plan Box -->

                <div class="span4 pro">

                    <div class="plan">

                        <div class="wrapper">
                            <img class="ribbon" src="Content/bootstrap/themes/images/badge.png" />
                            <h3>Pro
                            </h3>

                            <div class="price">
                                <span class="dollar">$</span>
                                <span class="qty">99</span>
                                <span class="month">/month</span>
                            </div>
                            <div class="features">
                                <p>
                                    <strong>10</strong>
                                    Shared Projects                                        
                               
                                </p>
                                <p>
                                    <strong>25</strong>
                                    Team Members                                        
                               
                                </p>
                                <p>
                                    <strong>Unlimited</strong>
                                    Storage                                        
                               
                                </p>
                                <p>
                                    <strong>Plus </strong>
                                    Phone Support                                        
                               
                                </p>
                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>
                    </div>
                </div>
                <!-- Plan Box -->
                <div class="span4 standar">
                    <div class="plan">
                        <div class="wrapper">
                            <h3>Standard
                            </h3>
                            <div class="price">
                                <span class="dollar">$</span>
                                <span class="qty">65</span>
                                <span class="month">/month</span>
                            </div>
                            <div class="features">
                                <p>
                                    <strong>10</strong>
                                    Shared Projects                                        
                               
                                </p>
                                <p>
                                    <strong>4</strong>
                                    Team Members                                        
                               
                                </p>
                                <p>
                                    <strong>10</strong>
                                    Storage                                        
                               
                                </p>
                            </div>
                            <a class="order" href="pricing.html">ORDER NOW</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="start">
                <p>
                    Start your free, no-risk, 14 day trial! 
               
                </p>
                <a href="pricing.html">Start Now!</a>
            </div>
        </div>
    </div>
    <div id="clients">
        <div class="container">
            <div class="section_header">
                <h3>Clients
                </h3>
            </div>
            <div class="row">
                <div class="span2 client">
                    <div class="img client1"></div>
                </div>
                <div class="span2 client">
                    <div class="img client2"></div>
                </div>
                <div class="span2 client">
                    <div class="img client3"></div>
                </div>
                <div class="span2 client">
                    <div class="img client1"></div>
                </div>
                <div class="span2 client">
                    <div class="img client2"></div>
                </div>
                <div class="span2 client">
                    <div class="img client3"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- starts footer -->
    <footer id="footer">
        <div class="container">
            <div class="row sections">
                <div class="span4 recent_posts">
                    <h3 class="footer_header">Recent Posts                        
                    </h3>
                    <div class="post">
                        <a href="blogpost.html">
                            <img class="img-circle" src="Content/bootstrap/themes/images/recent_post1.png" />
                        </a>
                        <div class="date">
                            Wed, 12 Dec                             
                       
                        </div>
                        <a class="title" href="blogpost.html">Randomised words which don't look embarrasing hidden.
                        </a>
                    </div>
                    <div class="post">
                        <a href="blogpost.html">
                            <img class="img-circle" src="Content/bootstrap/themes/images/recent_post2.png" />
                        </a>
                        <div class="date">
                            Mon, 12 Dec                             
                       
                        </div>
                        <a class="title" href="blogpost.html">Randomised words which don't look embarrasing hidden.
                        </a>
                    </div>
                </div>
                <div class="span4 testimonials">
                    <h3 class="footer_header">Testimonials                        
                    </h3>
                    <div class="wrapper">
                        <div class="quote">
                            <span>“</span>
                            There are many variations of passages of randomised words which don't look even slightly believable. You need to be sure there isn't anything embarrassing of text.
                                
                            <span></span>
                        </div>
                        <div class="author">
                            <img src="Content/bootstrap/themes/images/recent_post2.png" />
                            <div class="name">
                                Muhammad Azhar
                           
                            </div>
                            <div class="info">
                                Azhar Cs                                  
                           
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span4 contact">
                    <h3 class="footer_header">Contact                        
                    </h3>
                    <form action="#" method="post">
                        <input type="text" placeholder="Your name" />
                        <input type="text" placeholder="Your email" />
                        <textarea rows="3" placeholder="Message"></textarea>
                        <input type="submit" value="Send" />
                    </form>
                </div>
            </div>
            <div class="row credits">
                <div class="span12">
                    <div class="row social">
                        <div class="span12">
                            <a class="facebook" href="#">
                                <span class="socialicons ico1"></span>
                                <span class="socialicons_h ico1h"></span>
                            </a>
                            <a class="twitter" href="#">
                                <span class="socialicons ico2"></span>
                                <span class="socialicons_h ico2h"></span>
                            </a>
                            <a class="gplus" href="#">
                                <span class="socialicons ico3"></span>
                                <span class="socialicons_h ico3h"></span>
                            </a>
                            <a class="flickr" href="#">
                                <span class="socialicons ico4"></span>
                                <span class="socialicons_h ico4h"></span>
                            </a>
                            <a class="pinterest" href="#">
                                <span class="socialicons ico5"></span>
                                <span class="socialicons_h ico5h"></span>
                            </a>
                            <a class="dribble" href="#">
                                <span class="socialicons ico6"></span>
                                <span class="socialicons_h ico6h"></span>
                            </a>
                            <a class="behance" href="#">
                                <span class="socialicons ico7"></span>
                                <span class="socialicons_h ico7h"></span>
                            </a>
                        </div>
                    </div>
                    <div class="row copyright">
                        <div class="span12">
                            © 2013                              
                       
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Scripts -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="Content/bootstrap/js/theme.js"></script>
    <script src="Content/bootstrap/js/index-slider.js"></script>
</body>
</html>
